<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>修改试卷组装页面</title>
		 <link rel="stylesheet" href='<c:url value="/share/bootstrap.min.css"></c:url>'> 
		 <script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
		<script src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
		<script src='<c:url value="/js/all.js"></c:url>'></script> 
		<script type="text/javascript" src='<c:url value="/js/boot.js"></c:url>'></script>
		<script type="text/javascript"
		src='<c:url value="/js/rqfui/rqfui.js"></c:url>'></script>
		<style type="text/css">
			.header_nav_1,.header_nav_1_current{
				float: left;
				margin-right: 50px;
				margin-top: 35px;
			}
			.header_nav_2{
				float: right;
				margin-top: 35px;
			}
			.header_nav_1 span{
				background: #B8B8B8;
				color: #fff;
				padding:2px 6px;
				border-radius: 50%;
			}
			.header_nav_1 font{
				font-family: "微软雅黑";
				font-size: 18px;
				color: #b8b8b8;
				font-weight: 600;
			}
			.header_nav_1_current span{
				background: #2b5eae;
				color: #fff;
				padding:2px 6px;
				border-radius: 50%;
			}
			.header_nav_1_current font{
				font-family: "微软雅黑";
				font-size: 18px;
				color: #2b5eae;
				font-weight: 600;
			}
			
			.header_nav_2 div{
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				font-weight: 600;
				color: #2b5eae;
				padding: 3px 20px;
				border: 1px solid #fff;
			}
			.header_nav_2 >div:hover{
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				font-weight: 600;
				color: #fff !important;
				border: 1px solid #B8B8B8;
				background: #82bcff;
				padding: 3px 20px;
				border-radius: 2px;
			}
			hr {
			    margin-top: 10px;
			    margin-bottom: 30px;
			    border: 0;
			    border-top: 2px solid #2459aa;
			}
			.header_content_center{
				width: 790px;
				/*max-width: 1190px;*/
				margin: 0 auto;  
				position: relative;
			}
			.plus{
				font-size: 50px;
				color: #B8B8B8;
				margin-top:30% ;
				
				text-align: center;
			}
			.header_content_center_content_border{
				border: 1px dashed #B8B8B8;
				float: left;
				margin-bottom: 30px;
				width: 120px;
				height: 120px; 
				border-radius: 5px;
				margin-right: 60px;
			} 
			.header_content_center_content_text{
				margin: 15px 25px;
				color: #B8B8B8; 
				font-weight: 600;
			}
			
			.content_Examination_list_left>ul{
				padding: 0px;
				
			}
			.content_Examination_list_left>ul>li{
				width: 105px !important;
			    padding: 10px 30px;
			    background: #c4dfff;
			    color: #fff;
			    margin-bottom: 10px;
			    cursor : pointer;
			}
			
			.content_Examination_list_left{
				margin-top: 20px;
				padding: 0;
				width: 105px;
				left: -105px;
			}
			.jake_Wang_Bg295c96{
				background: #295c96 !important;
			}
			
			 .Examination_list>li{
				width: 790px;
				text-align: left;
				padding: 15px;
				margin-bottom: 15px;
				margin-top: 15px;
				border: 1px solid #494949;
				list-style-type:none;
			}
			.Examination_list>li:nth-child(1){
				margin-top: 0;
			}
			.Examination_list>li:nth-last-child(1){
				margin-bottom: 0;
			}
			.Examination_list_title{
				border: 1px solid #a4a4a4;
				padding: 6px 12px;
			}
			.Examination_list_title>span{
				background: #295c96;
			    color: #fff;
			    padding: 3px 6px;
			    border-radius: 50%;
			}
			.Examination_list_content{
				border: 1px solid #a4a4a4;
				padding: 10px 25px;
				margin-top: 10px;
			}
			.Examination_list_content>li{
				width: 100% !important;
				position: relative;
	    		overflow: hidden;
	    		padding: 4px 0;
			}
			.Examination_list_content>li>input{
				float: left;
				margin-right: 10px;
			}
		</style>
	</head>
	<body >
		<div class="header_content_center">
			<div class="row" style="margin: 0 auto">
				<div class="header_nav_1">
					<span >1</span>
					<font >新建试卷</font>
				</div>
				<div class="header_nav_1_current">
					<span >2</span>
					<font >试卷组装</font>
				</div>
				<div class="header_nav_1 ">
					<span >3</span>
					<font >设置试卷</font>
				</div>
				<div class="header_nav_2">
					<div onclick="preview()" style="cursor:pointer;"> 
						预览
					</div>
					<div onclick="save()" style="cursor:pointer;"> 
						保存
					</div>
					<div onclick="last()" style="cursor:pointer;"> 
						上一步
					</div>
					<div onclick="next()" style="cursor:pointer;">
						下一步
					</div>
				</div>
			</div>
			
			<div>
				<hr />
			</div>
		</div>
		<div class="header_content_center">
			<div class="header_nav_btn">
				<div class="header_content_center_content_border" id="question_0" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加单选题</div>
				</div>
				<div class="header_content_center_content_border" id="question_1" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加多选题</div>
				</div>
				<div class="header_content_center_content_border" id="question_2" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加判断题</div>
				</div>
				<div class="header_content_center_content_border" id="question_3" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加解答题</div>
				</div>
				
			</div>
			<div id="content_list">
				<div class="col-xs-1 content_Examination_list_left">
					<ul >
						<li  class="jake_Wang_Bg295c96" style="display: none;"id="type_0">单选题</li>
						<li style="display: none;"id="type_1">多选题</li>
						<li style="display: none;"id="type_2">判断题</li>
						<li style="display: none;"id="type_3">解答题</li>
					</ul>
				</div>
				<div  style="float: left;" id = "list">
					<ul class="Examination_list" style="margin-left: -145px;width: 100%;max-width: 1190px;" id="questionType_0">
					</ul>
					<ul class="Examination_list" style="margin-left: -145px;width: 100%;max-width: 1190px;" id="questionType_1">
					</ul>
					<ul class="Examination_list" style="margin-left: -145px;width: 100%;max-width: 1190px;" id="questionType_2">
					</ul>
					<ul class="Examination_list" style="margin-left: -145px;width: 100%;max-width: 1190px;" id="questionType_3">
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	mini.parse();
	mini_debugger = false;
	var rootPath = '${rootPath}';
	var paperId = '${paperId}';
	var grading_way = '${grading_way}';
	var isSave=false;
	$(function(){
		$(".header_content_center_content_border").mouseover(function  () {
			$(this).css("border-color","#2b5eae");
			$(this).children("div").css("color","#2b5eae");
		});
		$(".header_content_center_content_border").mouseout(function  () {
			$(this).css("border-color","#B8B8B8");
			$(this).children("div").css("color","#B8B8B8");
		});
		$(".header_content_center_content_border").click(function  () {
		});
		$(".content_Examination_list_left li").click(function  () {
			if ($(this).index()==0) {
				state1();
			}else if($(this).index()==1){
				state2();
			}else if($(this).index()==2){
				state3();
			}else if($(this).index()==3){
				state4();
			}
		});
	});
	
	function state1(){
		$(".content_Examination_list_left li").not($("#type_0")).removeClass();
		$("#type_0").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").show();
		$("#questionType_1").hide();
		$("#questionType_2").hide();
		$("#questionType_3").hide();
	}
	function state2(){
		$(".content_Examination_list_left li").not($("#type_1")).removeClass();
		$("#type_1").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").hide();
		$("#questionType_1").show();
		$("#questionType_2").hide();
		$("#questionType_3").hide();
	}
	function state3(){
		$(".content_Examination_list_left li").not($("#type_2")).removeClass();
		$("#type_2").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").hide();
		$("#questionType_1").hide();
		$("#questionType_2").show();
		$("#questionType_3").hide();
	}
	function state4(){
		$(".content_Examination_list_left li").not($("#type_3")).removeClass();
		$("#type_3").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").hide();
		$("#questionType_1").hide();
		$("#questionType_2").hide();
		$("#questionType_3").show();
	}
	function last(){
		if(isSave){
			location.href = rootPath + "/testPaper/updateMv/" + paperId;
		}else{
			save(function(){
				location.href = rootPath + "/testPaper/updateMv/" + paperId;
			})
		}
	}
	function next(){
		if(isSave){
			location.href = rootPath + "/testPaper/paperSetup/" + paperId;
		}else{
			save(function(){
				location.href = rootPath + "/testPaper/paperSetup/" + paperId;
			})
		}
	}
	if(grading_way=="auto"){
		$("#question_3").hide();
		$("#question_2").css({"margin-right":"240px"});
	}
	$("#question_0").click(function(){
		getQuestionList("单选题");
		$(".content_Examination_list_left li").not($(this)).removeClass();
		$("#questionType_0").show();
		$("#questionType_1").hide();
		$("#questionType_2").hide();
		$("#questionType_3").hide();
		flag = true;
	});
	$("#question_1").click(function(){
		getQuestionList("多选题");
		$(".content_Examination_list_left li").not($(this)).removeClass();
		$("#questionType_0").hide();
		$("#questionType_1").show();
		$("#questionType_2").hide();
		$("#questionType_3").hide();
		flag = true;
	});
	$("#question_2").click(function(){
		getQuestionList("判断题");
		$(".content_Examination_list_left li").not($(this)).removeClass();
		$("#questionType_0").hide();
		$("#questionType_1").hide();
		$("#questionType_2").show();
		$("#questionType_3").hide();
		flag = true;
	});
	$("#question_3").click(function(){
		getQuestionList("解答题");
		$(".content_Examination_list_left li").not($(this)).removeClass();
		$("#questionType_0").hide();
		$("#questionType_1").hide();
		$("#questionType_2").hide();
		$("#questionType_3").show();
		flag = true;
	});
	function preview(){
		save(function(){
			window.open(rootPath + '/testPaper/checkMv/' + paperId); 
		})
	}
	var questionId="";
	var old_questionId="";
	function getQuestionList(type) {
		mini.open({
			url : rootPath + "/testPaper/questionListMv/" + type,
			title : "选择列表",
			width : 900,
			height : 700,
			onload : function() {
			},
			ondestroy : function(action) {
				if (action == "close") {
					return;
					//getTestList(questionId);
				} else {
					var str = action.split(",");
					if(!questionId){
						questionId = action;
					}else{
						var questions = questionId.split(",");
						for(var i = 0; i < str.length; i++ ){
							var flag = false;
							for (var j = 0;j < questions.length; j++) {
								if (questions[j]==str[i]){
									flag = true;
									continue;
								}
							}
							if(!flag){
								questionId += "," + str[i];
							}
						}
					}
					getTestList(questionId);
				}
			}
			});
		}
	var flag = true;
		function showTest(data) {
			var htmStr0=""; 
			var htmStr1=""; 
			var htmStr2=""; 
			var htmStr3=""; 
			var htmStr="";
			
			for(var i = 0; i < data.length; i++){
				if (data[i].class_id == "单选题") {
					htmStr0 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					var str = data[i].selects;
					var arr = str.split(",nwebadjj,_");
					for (var j = 0; j < arr.length; j++) {
						var option = String.fromCharCode(j + 65);
						htmStr0 += "<li>"
								+ "<input type=\"radio\" name=\"radio1\" />&nbsp;"
								+ "<font>" + option + '、' + arr[j] + "</font>"
								+ "</li>";
					}
					htmStr0 += "</ul></li>";
				}else if (data[i].class_id == "多选题") {
					htmStr1 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					var str = data[i].selects;
					var arr = str.split(",nwebadjj,_");
					for (var j = 0; j < arr.length; j++) {
						var option = String.fromCharCode(j + 65);
						htmStr1 += "<li>"
								+ "<input type=\"checkbox\" name=\"check1\" />&nbsp;"
								+ "<font>" + option + '、' + arr[j] + "</font>"
								+ "</li>";
					}
					htmStr1 += "</ul></li>";
				}else if (data[i].class_id == "判断题") {
					htmStr2 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					htmStr2 += "<li><input type=\"radio\" name=\"radio1\" />&nbsp;<font>是</font>"
								+ "</li><li><input type=\"radio\" name=\"radio1\" />&nbsp;<font>否</font>"
								+ "</li>";
					htmStr2 += "</ul></li>";
				}else if (data[i].class_id == "解答题") {
					htmStr3 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					htmStr3 += "<p style =\"height:45px\"></p>";
					htmStr3 += "</ul></li>";
				}
			}
			if(htmStr0){
				$("#question_0").show();
				$("#questionType_0").html(htmStr0);
				$(".content_Examination_list_left ul li:eq(0)").show();
				state1();
			}else{
				$(".content_Examination_list_left ul li:eq(0)").hide();
			}
			if(htmStr1){
				$("#questionType_1").html(htmStr1);
				$("#question_1").show();
				$(".content_Examination_list_left ul li:eq(1)").show();
				state2();
			}else{
				$(".content_Examination_list_left ul li:eq(1)").hide();
			}
			if(htmStr2){
				$("#questionType_2").html(htmStr2);
				$("#question_2").show();
				$(".content_Examination_list_left ul li:eq(2)").show();
				state3();
			}else{
				$(".content_Examination_list_left ul li:eq(2)").hide();
			}
			if(htmStr3){
				$("#question_3").show();
				$("#questionType_3").html(htmStr3);
				$(".content_Examination_list_left ul li:eq(3)").show();
				state4();
			}else{
				$(".content_Examination_list_left ul li:eq(3)").hide();
			}
			
			if(flag){
				var index = $(".content_Examination_list_left li").siblings("li:visible")[0].id;
				var indexidnum = index.charAt(index.length - 1);
				if(indexidnum == 0){
					state1();
				}else if(indexidnum == 1){
					state2();
				}else if(indexidnum == 2){
					state3();
				}else{
					state4();
				}
				flag = false;
			}
		
			$(".deleteEle").click(function() {
				var num = $(this).parent().parent().parent().parent()[0].id;
				var numm = num.charAt(num.length - 1);
				if($(this).parent().parent().parent().parent().children().length==1){
					$("#type_"+numm+"").hide();
					if($("#type_"+numm+"").siblings("li:visible")[0]){
						var index = $("#type_"+numm+"").siblings("li:visible")[0].id;
						var indexidnum = index.charAt(index.length - 1);
						if(indexidnum == 0){
							state1();
						}else if(indexidnum == 1){
							state2();
						}else if(indexidnum == 2){
							state3();
						}else{
							state4();
						}
					}
				}
				$(this).parent().parent().parent().remove();
			});
		}

		$(function() {
			getTestIdList();
		});
		function getTestList(id) {
			var url = rootPath + "/testPaper/questionListData";
			$.ajax({
				url : url,
				method : "post",
				dataType : "json",
				data : {
					'data' : id
				},
				success : function(data) {
					if (data) {
						showTest(data);
					} else {
						//alert("获取信息失败！");
					}
				},
				error : function() {
					mini.alert("失败！");
				}
			});
		}
		function save(callBackfunction) {
			if (!questionId) {
				top.commonTools.showTip("请添加试题！",2);
			} else {
				if(old_questionId===questionId){
					if (callBackfunction) {
						callBackfunction();
					}
					return;
				}
				var url = rootPath + "/testPaper/updatePaperTest/" + paperId;
				$.ajax({
					url : url,
					method : "post",
					dataType : "json",
					data : {
						'data' : questionId
					},
					success : function(data) {
						if (data) {
							
							isSave = true;
							if (callBackfunction) {
								callBackfunction();
							}else{
								top.commonTools.showTip("保存成功！", 1);
							}
						} else {
							top.commonTools.showTip("操作失败！", 2);
						}
					},
					error : function() {
						mini.alert("失败！");
					}
				});
			}
		}

		function getTestIdList() {
			var url = rootPath + "/testPaper/testList/" + paperId;
			$.ajax({
				url : url,
				method : "post",
				dataType : "html",
				data : {},
				success : function(data) {
					if (data) {
						questionId = data;
						old_questionId = data;
						getTestList(questionId);
					} else {
						//alert("获取信息失败！");
					}
				},
				error : function() {
					top.commonTools.showTip("失败！", 2);
				}
			});
		}
		function _delete(id) {
			var questions = questionId.split(",");
			questionId = "";
			for(var i = 0; i<questions.length;i++){
				if(questions[i] != id){
					if(!questionId){
						questionId = questions[i];
					}else{
						questionId +="," + questions[i];
					}
				}
			}
		}
	</script>
</html>
